<!--  -->
<template>
    <a-form :model="form" layout="inline" size="mini">
        <a-form-item label="生产单号">
            <a-input allow-clear class="bacClass" v-model="form.weavingCode" :style="{ width: '150px' }"
                @press-enter="huiche" />
        </a-form-item>
        <a-form-item label="织布单号">
            <a-input allow-clear class="bacClass" v-model="form.planOrderCode" :style="{ width: '150px' }"
                @press-enter="huiche" />
        </a-form-item>
        <a-form-item label="机台号">
            <a-input allow-clear class="bacClass" v-model="form.machineCode" :style="{ width: '150px' }"
                @press-enter="huiche" />
        </a-form-item>
        <!-- <a-form-item label="楼层">
            <a-input allow-clear class="bacClass" v-model="form.area" :style="{ width: '150px' }" @press-enter="huiche" />
        </a-form-item> -->
        <a-form-item label="打印状态">
            <a-select popup-container="html"  class="bacClass" :style="{ width: '150px' }" v-model="form.printState" allow-clear allow-search
                @press-enter="huiche">
                <a-option :value="0">未打印</a-option>
                <a-option :value="1">已打印</a-option>
            </a-select>
        </a-form-item>
        <a-form-item label="生产状态">
            <!-- <a-input allow-clear class="bacClass" v-model="form.productionStates" :style="{ width: '150px' }"
                @press-enter="huiche" /> -->
            <a-checkbox-group v-model="form.productionStates">
                <a-checkbox :value="0">等待</a-checkbox>
                <a-checkbox :value="1">生产中</a-checkbox>
                <a-checkbox :value="2">完成</a-checkbox>
            </a-checkbox-group>
        </a-form-item>
    </a-form>
    <!-- '开需求单', -->
    <div class="cssToolbar">
        <Toolbar :items="[
            `查询`,
            '打印布飞(新)',
            `打印机台纸`,]" @select="cx" @paper="paper" @dyBoufeix="dyBoufeixs">
        </Toolbar>
    </div>
    <div class="cssTable">
        <a-spin :loading="form.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33/fixMultipleNum" :headerHeight="33/fixMultipleNum" :suppressCopyRowsToClipboard="true"
                :suppressDragLeaveHidesColumns="true" rowSelection="multiple" @grid-ready="gridReady"
                @columnResized="onColumnResized" @columnMoved="onColumnMoved" @columnVisible="onColumnVisible" :style="{
                    height: pageData.rHeight - 200 + 'px'
                }" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc"
                :localeText="localeText1" @click="clickRowSelection"></AgGridVuesCopys>
        </a-spin>
    </div>
    <!-- <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size @change="PageSize"
        @page-size-change="change1" style="justify-content: center" :page-size="size" :current="page" popup-container="html"/> -->
    <el-pagination
      :current-page="page"
      :page-size="size"
      :page-sizes="pagingList1"
      style="justify-content: center"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="change1"
      @current-change="PageSize"
      :teleported="false"
    />
    <a-drawer ok-text='关闭' :drawer-style="{ 'zIndex': 9999 }" @ok="bc" :width="'100%'" :height="'100%'" :visible="bfShowAdd"
        placement="bottom" :hide-cancel="true">
        <template #title>
            模版
        </template>
        <iframe v-if="bfShowAdd" style="width: 100%;height: 100%;" :src="srcUrl"></iframe>
    </a-drawer>
    <el-dialog v-model="addWeightDialog2" :width="500" title="完结" top="35vh">
        <a-space>
            <a-button type="primary" @click="pjwj">平均分完结</a-button>
            <a-button type="primary" @click="zjwj">直接完结</a-button>
        </a-space>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="() => addWeightDialog2 = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message,Modal } from '@arco-design/web-vue'
import printJS from 'print-js'
import emitter from '@/hooks/useEventBus'

import { localeText } from '@/api/aggridZw'
import usePermission from '@/store/modules/permission'
import { pagingList } from '@/api/paging'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
import { autofontsize,fixMultiple } from "@/utils/autofixpage"


const permissionStore = usePermission()
const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)

const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}
const fixMultipleNum = computed(()=>{
    nextTick(()=>{
        if(gridOption.value){
        gridOption.value.resetRowHeights()
        gridOption.value.autoSizeColumns()
    }
    })
    
    return fixMultiple.value})
const clickRowSelection = () => {
    selectedRowKeys.value = gridOption.value.getSelectedRows().map((res: any) => res.id)
}


const table = useTable()
const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    doRefresh();
}
function change1(val: any) {
    size.value = val
    doRefresh();
}

function doRefresh() {
    form.pageLoading = true
    updateGridState01()
    post({
        url: "planSingle/planMachineTask/getPageInfo",
        data: {
            page: page.value,
            size: size.value,
            printState: form.printState,
            weavingCode: form.weavingCode,
            planOrderCode: form.planOrderCode,
            machineCode: form.machineCode,
            area: form.area,
            productionStates: form.productionStates,
        },
    })
        .then(({ data, code }: any) => {
            if (code === 200) {
                table.handleSuccess(data.list)
                gridOption.value.setRowData(data.list)
                total.value = data.total;
            }
        })
        .catch(console.log).finally(() => {
            form.pageLoading = false
        })
}


const cx = () => {
    page.value = 1
    doRefresh()
}

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    doRefresh()
})
const pageData = reactive({
    showAdd: false,
    rHeight: 0
})
const paper = async () => {
    if (selectedRowKeys.value.length === 0) {
        Message.error('请先勾选')
        return
    }
    post({
        url: 'planSingle/planSchedul/printShippingData',
        data: gridOption.value.getSelectedRows(),
        responseType: 'blob'
    }).then((zzx: any) => {
        let reader = new FileReader();
        reader.readAsDataURL(zzx);
        reader.onload = function () {
            let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '');
            printJS({ printable: pdfBase64, type: 'pdf', base64: true })
        };
    })
}
const { selectedRowKeys } = useRowSelection()

const wjListObj: any = ref()

const tableColumns: any = [
    {
        title: "公司",
        key: "outSouringCompany",
        dataIndex: "outSouringCompany",
        width: 150,
    },
    {
        title: "生产序号",
        key: "serialNum",
        dataIndex: "serialNum",
        width: 150,
    },
    {
        title: "生产单号",
        key: "weavingCode",
        dataIndex: "weavingCode",
        width: 150,
    },
    {
        title: "织布单号",
        key: "planOrderCode",
        dataIndex: "planOrderCode",
        width: 150,
    },
    {
        title: "落布匹数",
        key: "csNum",
        dataIndex: "csNum",
        width: 150,
    },
    {
        title: "验布匹数",
        key: "sgcNum",
        dataIndex: "sgcNum",
        width: 150,
    },
    {
        title: "客户",
        key: "customName",
        dataIndex: "customName",
        width: 150,
    },
    {
        title: "机台号",
        key: "machineCode",
        dataIndex: "machineCode",
        width: 200,
    },
    {
        title: "楼层",
        key: "area",
        dataIndex: "area",
        width: 450,
    },
    {
        title: "指令重量",
        key: "orderWeight",
        dataIndex: "orderWeight",
        width: 150,
    },
    {
        title: "分配重量",
        key: "alreadyWeight",
        dataIndex: "alreadyWeight",
        width: 150,
    },
    {
        title: "落布重量",
        key: "actualWeight",
        dataIndex: "actualWeight",
        width: 150,
        align: 'left'
    },
    {
        title: "验布重量",
        key: "posteriorWeight",
        dataIndex: "posteriorWeight",
        width: 150,
    },
    {
        title: "未生产重量",
        key: "productWeight",
        dataIndex: "productWeight",
        width: 150,
    },
    {
        title: "坯布编号",
        key: "greyCode",
        dataIndex: "greyCode",
        width: 150,
    },
    {
        title: "坯布名称",
        key: "greyName",
        dataIndex: "greyName",
        slotName: 'greyName',
        width: 150,
    },
    {
        title: "织造交期",
        key: "weavDeliveryDate",
        dataIndex: "weavDeliveryDate",
        width: 150,
    },
    {
        title: "预计上线时间",
        key: "pStartTime",
        dataIndex: "pStartTime",
        width: 150,
    },
    {
        title: "实际上线时间",
        key: "actualStartTime",
        dataIndex: "actualStartTime",
        width: 150,
    },
    {
        title: "预计完成时间",
        key: "pEndTime",
        dataIndex: "pEndTime",
        width: 150,
    },
    {
        title: "实际完成时间",
        key: "actualEndTime",
        dataIndex: "actualEndTime",
        width: 150,
    },
    {
        title: "生产状态",
        key: "productionState",
        dataIndex: "productionState",
        slotName: 'productionState',
        width: 80,
        fixed: 'right'
    },
    {
        title: "打印状态",
        key: "printState",
        dataIndex: "printState",
        slotName: 'printState',
        width: 80,
        fixed: 'right'
    },
    {
        title: "操作",
        key: "alites",
        dataIndex: "alites",
        slotName: 'alites',
        width: 80,
        fixed: 'right'
    }
]

let tc: any[] = tableColumns.map((o: any) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
    }
    if (o.key === 'alites') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 100
        obj['cellRenderer'] = {
            template: `
            <el-button style="color:#165dff;" link @click="a1" v-if="params.data.productionState != 2">完结</el-button>
            <el-button style="color:#ccc;" link v-if="params.data.productionState == 2" disabled>完结</el-button>
            `,
            setup(props: any) {
                const a1 = () => {
                    wjListObj.value = props.params.data
                    addWeightDialog2.value = true
                }
                return {
                    a1
                }
            }

        }
    }
    if (o.key === 'printState') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 120
        obj['cellRenderer'] = {
            template: `<span>{{a1}}</span>`,
            setup(props: any) {
                return {
                    a1: props.params.data.printState == 0 ? '未打印' : '已打印'
                }
            }

        }
    }
    if (o.key === 'productionState') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj["lockPosition"] = "right"
        obj['width'] = 120
        obj['cellRenderer'] = {
            template: `<span>{{a1}}</span>`,
            setup(props: any) {
                return {
                    a1: props.params.data.productionState == 0 ? '等待' : props.params.data.productionState == 1 ? '生产中' : '完成'
                }
            }
        }
    }
    return obj
})

let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
}]
tc = a.concat(tc)



const form: any = reactive({
    "printState": '', //打印状态 0未打印 1已打印
    "weavingCode": '',//"生产单号",
    "planOrderCode": '',//"织布单号",
    "machineCode": '',//"机台号",
    "area": '', //"位置",
    "productionStates": [0, 1], //[0, 1, 2] 生产状态 0 等待 1 生产中  2 完成
})

const huiche = () => {
    doRefresh();
}

const bfShowAdd: any = ref(false)
let srcUrl = ref()
const dyBoufeixs = async () => {
    if (selectedRowKeys.value.length === 0) {
        Message.error('请先勾选')
        return
    }
    if (selectedRowKeys.value.length > 1) {
        Message.error('只能勾选一条')
        return
    }
    const jvData: any = table.dataList.filter((res: any) => {
        return selectedRowKeys.value[0] == res.id
    })
    if (jvData[0].customName == '') {
        Message.error('该计划单没有选择客户名称')
        return
    } else {
        const res: any = await post({
            url: 'planSingle/clothfiy/getAutomaticInfo',
            data: {
                customName: jvData[0].customName
            }
        })
        if (res.code == 200) {
            srcUrl.value = `./hiprint/custom2.html?modelData=${JSON.stringify(res.data)}&jhd=${jvData[0].planOrderCode}`
            bfShowAdd.value = true
        } else {
            Message.error(res.message)
        }
    }

}

const bc = () => {
    bfShowAdd.value = false
}

const addWeightDialog2 = ref(false)

const zjwj = () => {
    post({
        url: 'planSingle/planMachineTask/pmtFinish',
        data: [wjListObj.value]
    }).then(({ code, message }) => {
        if (code == 200) {
            Message.success('完结成功')
            addWeightDialog2.value = false
            doRefresh()
        } else {
            Message.error(message)
        }
    })
}
const pjwj = () => {
    post({
        url: 'planSingle/planMachineTask/pmtAverageFinish',
        data: wjListObj.value
    }).then(({ code, message }) => {
        if (code == 9527) {
            Modal.confirm({
                title: '系统提示',
                content: '确认删除选中的数据?',
                onOk: () => {
                    zjwj()
                },
            })
        } else if (code == 200) {
            Message.success('完结成功')
            addWeightDialog2.value = false
            doRefresh()
        } else {
            Message.error(message)
        }
    })
}
const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('proIndex-1', gridOption, colState, tc)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
const onColumnVisible = () => {
    saveGridState01()
}
</script>
<style lang='less' scoped>
.cssToolbar {
    text-align: right;
    margin-bottom: 2px;
}

.isZbous {
    width: 800px;
    // margin-left: 15px;
    margin: 0;
    padding: 0;
    margin: 0 auto;
    zoom: 0.7;

    .isZbouss {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
    }

    .isZbouss1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 600;

        .isZbouss1-1 {
            font-size: 22px;
            font-weight: 600;
        }
    }

    .isZbouss2 {
        width: 70%;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 600;
    }
}

#jitdy2 {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    font-size: 24px;
}

.isTable {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;

    tr {
        height: 10px;
    }

    td {
        border: 1.2px solid #ccc;
    }
}

.isTable1 {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;
    margin-top: 20px;

    td {
        border: 1.2px solid #ccc;
    }

    .isTrTdNo {
        td {
            border-top: 1.2px solid #fff;
            border-right: 1.2px solid #fff;
            border-left: 1.2px solid #fff;
            color: #fff;
            opacity: 0;
        }
    }
}

.isTable2 {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;
    margin-top: 20px;

    td {
        border: 1.2px solid #ccc;
    }
}

.footer {
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    text-align: left;

    .footer2 {
        width: 100%;
        text-align: right;
        font-size: 20px;
        font-weight: 600;
    }

}

.gyYaoqiu {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    border-bottom: 1.2px solid #ccc;
    border-left: 1.2px solid #ccc;
    border-right: 1.2px solid #ccc;
}


.thead {
    white-space: nowrap;
    justify-content: center;

    .th {
        box-sizing: border-box;
        text-align: center;
        display: inline-block;
    }

    width: 100%;
    text-align: left;
}

.tbody {
    white-space: nowrap;
    justify-content: center;

    .td {
        text-align: center;
        box-sizing: border-box;
        display: inline-block;
    }

    text-align: left;
}

.trow>div {
    display: inline-block;
    text-align: center;
}

.active {
    width: 80px !important;

}

.gyYaoqius {
    width: 100%;
    margin: 0 auto;
    border-bottom: 1.2px solid #ccc;
    border-left: 1.2px solid #ccc;
    border-right: 1.2px solid #ccc;
}

.trTds {
    font-size: 16px;
    font-weight: 600;
}

.footers {
    width: 100%;
    margin: 0 auto;

    div {
        display: flex;
        justify-content: space-between;
        font-size: 16px;

    }
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
:deep(.arco-form-item-label) {
    font-size:calc(12px / var(--auto-fixMultiple))!important ;
}
:deep(.arco-checkbox) {
    font-size:calc(14px / var(--auto-fixMultiple))!important ;
}
:deep(.el-button) {
    font-size:calc(14px / var(--auto-fixMultiple))!important ;
}
:deep(.arco-btn) {
    font-size:calc(14px / var(--auto-fixMultiple))!important ;
}
:deep(.ag-header-cell-text) {
    font-size:calc(14px / var(--auto-fixMultiple))!important ;
}
:deep(.ag-cell) {
    font-size:calc(14px / var(--auto-fixMultiple))!important ;
}
// /* 设置 ag-Grid 的字体大小 */
// :deep(.ag-theme-alpine .ag-header-cell-label,
// .ag-theme-alpine .ag-header-cell-text,
// .ag-theme-alpine .ag-cell) {
//   font-size: var(--auto-fontSize)!important; /* 设置字体大小，可以根据需要调整 */
// }
</style>